<template>
  <KiFormDialog :show.sync="dialogVisible" title="查看订单" readonly>
    <div v-loading="loading" style="min-height: 500px">
      <template v-if="!loading">
        <UnivariateTable title="商品信息">
          <tr class="el-table__row">
            <td class="el-table__cell">商品编码</td>
            <td class="el-table__cell">{{ info.productCode }}</td>
            <td class="el-table__cell">商品名称</td>
            <td class="el-table__cell">{{ info.productName }}</td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">所属商户名称</td>
            <td class="el-table__cell">{{ info.belongMerchantName }}</td>
            <td class="el-table__cell">所属店铺名称</td>
            <td class="el-table__cell">{{ info.belongSubMerchantName }}</td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">售价(元)</td>
            <td class="el-table__cell">
              <span v-if="info.businessTypeId == 4">
                {{
                  (info.currentPrice / info.quantity / info.hotelSpecification)
                    | $cent2yuan
                }}
              </span>
              <span v-else>
                {{ (info.currentPrice / info.quantity) | $cent2yuan }}
              </span>
            </td>
            <td class="el-table__cell">是否可退</td>
            <td class="el-table__cell">{{ info.returnSetName }}</td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">
              {{ info.businessTypeId == 1 ? '是否实名' : '限购模式' }}
            </td>
            <td class="el-table__cell">
              {{
                info.businessTypeId == 1
                  ? info.realNameTrans
                  : info.purchaseLimitName
              }}
            </td>
            <td class="el-table__cell"></td>
            <td class="el-table__cell"></td>
          </tr>
        </UnivariateTable>

        <UnivariateTable title="订单信息">
          <tr class="el-table__row">
            <td class="el-table__cell">订单编号</td>
            <td class="el-table__cell">{{ info.orderId }}</td>
            <td class="el-table__cell">数量</td>
            <td class="el-table__cell">{{ info.quantity }}</td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">订单金额(元)</td>
            <td class="el-table__cell">{{ info.currentPrice | $cent2yuan }}</td>
            <td class="el-table__cell">实付金额(元)</td>
            <td class="el-table__cell">{{ info.paidPrice | $cent2yuan }}</td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">实收金额(元)</td>
            <td class="el-table__cell">
              {{ info.settlementPrice | $cent2yuan }}
            </td>
            <td class="el-table__cell">当前订单状态</td>
            <td class="el-table__cell">{{ info.orderStatusName }}</td>
          </tr>
          <!--  -->
          <tr class="el-table__row">
            <td class="el-table__cell">是否优惠订单</td>
            <td class="el-table__cell">
              {{ info.discountOrder ? '是' : '否' }}
            </td>
            <td class="el-table__cell">优惠金额(元)</td>
            <td class="el-table__cell">
              {{ info.discountPrice | $cent2yuan }}
            </td>
          </tr>
          <!--  -->
          <tr class="el-table__row">
            <td class="el-table__cell">购买人</td>
            <td class="el-table__cell">{{ info.purchaserName }}</td>
            <td class="el-table__cell">是否为分享订单</td>
            <td class="el-table__cell">
              <span v-if="info.shareId != null">是</span>
              <span v-else>否</span>
            </td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">平台手续费(元)</td>
            <td class="el-table__cell">
              {{ info.platformCommission | $cent2yuan }}
            </td>
            <td class="el-table__cell">支付手续费(元)</td>
            <td class="el-table__cell">
              {{ info.payCommission | $cent2yuan }}
            </td>
          </tr>
          <tr v-if="info.businessTypeId == 1">
            <td class="el-table__cell">票务状态</td>
            <td class="el-table__cell">{{ info.thirdStatusName }}</td>
            <!-- 门票 -->
            <td class="el-table__cell">指定游玩日</td>
            <td class="el-table__cell">{{ info.useStartTime }}</td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">支付单号</td>
            <td class="el-table__cell">{{ info.payNo }}</td>
            <td class="el-table__cell">支付状态</td>
            <td class="el-table__cell">{{ info.payStatusName }}</td>
          </tr>
          <tr v-if="info.businessTypeId == 3">
            <!-- 劵类 -->
            <td class="el-table__cell">有效期</td>
            <td class="el-table__cell">
              {{
                info.orderProductAttribute &&
                  info.orderProductAttribute.validityEndTime
              }}
            </td>
            <td class="el-table__cell"></td>
            <td class="el-table__cell"></td>
          </tr>
          <tr v-if="info.businessTypeId == 4">
            <!-- 酒店 -->
            <td class="el-table__cell">入住时间</td>
            <td class="el-table__cell">{{ info.useStartTime }}</td>
            <td class="el-table__cell">离店时间</td>
            <td class="el-table__cell">{{ info.useEndTime }}</td>
          </tr>
          <tr v-if="info.businessTypeId == 4">
            <td class="el-table__cell">是否含早餐</td>
            <td class="el-table__cell">
              {{
                info.orderProductAttribute &&
                  info.orderProductAttribute.breakfast
              }}
            </td>
            <td class="el-table__cell"></td>
            <td class="el-table__cell"></td>
          </tr>
          <tr class="el-table__row">
            <td class="el-table__cell">备注</td>
            <td colspan="3">{{ info.remark }}</td>
          </tr>
        </UnivariateTable>

        <div v-if="info.businessTypeId != 5">
          <!-- 酒店、票务、券类 -->
          <h2>预订人信息</h2>
          <el-table :data="[info]" border>
            <el-table-column label="姓名" prop="purchaserName" />
            <el-table-column label="联系电话" prop="purchaserPhone" />
            <el-table-column label="身份证号" prop="purchaserCardNo" />
          </el-table>
        </div>

        <div v-if="info.sharePhone">
          <h2>分享人信息</h2>
          <el-table :data="[info]" border>
            <el-table-column label="手机号" prop="sharePhone" />
            <el-table-column label="分享奖励金" prop="sharePrice">
              <template v-slot="{ row }">
                {{ row.sharePrice | $cent2yuan }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-if="info.distributePrice >= 0">
          <h2>分销商信息</h2>
          <el-table :data="[info]" border>
            <el-table-column label="销售商户" prop="saleMerchantName" />
            <el-table-column label="销售店铺" prop="saleSubMerchantName" />
            <el-table-column label="分销奖励金" prop="distributePrice">
              <template v-slot="{ row }">
                {{ row.distributePrice | $cent2yuan }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div v-if="info.agentCompanyName">
          <h2>引入方信息</h2>
          <el-table :data="[info]" border>
            <el-table-column label="引入方" prop="agentCompanyName" />
            <el-table-column label="引入方分成金额" prop="agentPrice">
              <template v-slot="{ row }">
                {{ row.agentPrice | $cent2yuan }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 票务需要 0-非实名，1-实名, 酒店不需要管实名-->
        <div v-if="!(info.businessTypeId == 3 || info.businessTypeId == 5)">
          <h2>游客信息</h2>
          <el-table :data="touristData" border>
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="联系电话" prop="phone" />
            <el-table-column label="身份证号">
              <template v-slot="{ row }">
                {{ row.cardNo }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 实物才有收货人 -->
        <div v-if="info.businessTypeId == 5">
          <h2>收货人信息</h2>
          <el-table :data="consigneeData" border>
            <!-- 缺少 -->
            <el-table-column label="姓名" prop="name" />
            <el-table-column label="联系电话" prop="phone" />
            <el-table-column label="地址" prop="address">
              <template v-slot="{ row }">
                {{ row.areaName ? `${row.areaName}，` : '' }}{{ row.address }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <h2>变更信息</h2>
        <el-table :data="orderChange" border>
          <el-table-column type="index" />
          <el-table-column label="变更状态" prop="statusName" />
          <el-table-column label="变更时间" prop="changeTime" />
          <el-table-column label="备注" prop="changeMsg" />
          <el-table-column label="操作人" prop="changeUser" />
        </el-table>

        <template
          v-if="
            info.orderProductAttribute &&
              info.orderProductAttribute.useTimeType == 1
          "
        >
          <h2>场次信息</h2>
          <el-table :data="[info.orderProductAttribute]" border>
            <el-table-column label="场次时段">
              <template v-slot="{ row }">
                {{ row.periodStartTime }} ~ {{ row.periodEndTime }}
              </template>
            </el-table-column>
            <el-table-column label="是否按场次检票" prop="useTimeType">
              <template v-slot="{ row }">
                {{ row.accordingPeriodCheck == 1 ? '是' : '否' }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </template>
    </div>
  </KiFormDialog>
</template>
<script>
import API from './api'
export default {
  filters: {
    /**
     * 身份证号脱敏
     * @param {String} value 身份证号
     * @return String
     */
    ft_id_number (value) {
      if (value && value.length) {
        const len = value.length
        // const ic = "*****************";
        // return `${value.substr(0, 3)}${ic.substr(0, len - 7)}${value.substring(
        //   len - 4
        // )}`;
        return value.replace(/(\d{3})\d{11}(\d{4})/, '$1***********$2')
      } else {
        return value
      }
    },
    /**
     * 姓名脱敏
     * @param {String} value 姓名
     * @return String
     */

    ft_name (value) {
      let len = value.length
      if (value && len >= 2) {
        if (len == 2) {
          return `${value.substr(0, 1)} *`
        } else if (len == 3) {
          return `${value.substr(0, 1)}*${value.substr(2, 1)}`
        } else {
          const ic = '*****************'
          return `${value.substr(0, 1)}${ic.substr(
            0,
            len - 2
          )}${value.substring(len - 1)}`
        }
      } else {
        return value
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      loading: false,
      touristData: [], //游客信息
      consigneeData: [], //收货人信息
      orderChange: [], //变更信息
      info: {},
      checkTicketList: [] //检票记录数据
    }
  },
  methods: {
    open (orderId) {
      this.dialogVisible = true
      this.getOrderInfo(orderId)
      // this.getCheckTicketList(orderId);
    },
    /**
     * 获取订单数据
     * @param {String} orderId 订单ID
     * @return Void
     */
    getOrderInfo (orderId) {
      this.loading = true
      API.getOrderInfo({
        orderId
      })
        .then(({ data }) => {
          this.info = data
          this.touristData = data.orderPersonList || []
          this.orderChange = data.orderChange || []

          // 构建收货信息
          this.consigneeData = [
            {
              name: data.purchaserName,
              address: data.receiptInfo && data.receiptInfo.address,
              phone: data.purchaserPhone,
              areaName: data.receiptInfo && data.receiptInfo.areaName
            }
          ]
          this.loading = false
        })
        .catch(_ => {
          this.dialogVisible = false
        })
    },
    /**
     * 获取检票记录数据
     * @param {String} orderId 订单ID
     * @return Void
     */
    getCheckTicketList (orderId) {
      this.loading = true
      this.$POST('/order/check-record-new/queryForPage', {
        orderId
      })
        .then(data => {
          this.checkTicketList = data.list
        })
        .finally(e => {
          this.loading = false
        })
    }
  }
}
</script>
